<template>
  <div>
    <div class="flex justify-center content index overauto" v-if="!isPlaceAnOrder && !showSuccess && !showOrder"
         style="width: 100vw;height: 100vh;overflow-x: hidden;">
      <div class="content">


        <div class="relative swiper">
          <el-carousel :autoplay="true">
            <el-carousel-item   v-for="(item,index) in product.picture?.split(',')"
                                :key="index"
            >
              <div class="swiper-item bg"
                   :style="`background-image: url(${ item })`">

              </div>
            </el-carousel-item>
          </el-carousel>
          <SwiperBuyInfo :list="rollList" :product="product" v-if="rollList.style=='1'" />

          <div class="px-[18PX] w-100% py-[18PX] flex items-center  justify-between">
            <div class="flex flex-col pricebox">
              <div class="flex items-end pricebox">
                <div class=" text-[#FF0C06] mr-[10px] flex items-end">
                  <div class="symbol text-[#FF0C06]">{{ areaInfo.currencySymbol }}</div>
                  <div class="price text-[#FF0C06] text-bold">{{ product.discountedPrice || product.originalPrice }}</div>
                </div>
                <div class="text-[#C7C7C7]" style="text-decoration: line-through" v-if="product.discountedPrice">
                  {{getLanguage(props.product.language).originPrice}}：{{ areaInfo.currencySymbol }}{{ product.originalPrice || 0 }}
                </div>
              </div>
              <!-- <div class="flex flex-wrap items-center tagbox" v-if="product.tagValue">
                <p class="y-btn"  v-for="(item,index) in product.tagValue?.split(',')"
                   :key="index">
                  {{ item }}
                </p>
              </div> -->
            </div>
            <div class="mt-2 ml-2">
              <div style="gap: 5px" class="flex items-center time" v-if="product.countdown">
                <div class="text-[#FD4442]">{{getLanguage(props.product.language).theDistanceEnds}}：</div>

                <div class="cycle flex-center text-[#fff]">
                  {{ custDown?.hours.toString().padStart(2, '0') }}
                </div>

                <div class=" text-[#FD4442]">
                  :
                </div>

                <div class="cycle  flex-center text-[#fff]">
                  {{ custDown?.minutes.toString().padStart(2, '0') }}
                </div>

                <div class=" text-[#FD4442]">
                  :
                </div>

                <div class="cycle  flex-center text-[#fff]">
                  {{ custDown?.seconds.toString().padStart(2, '0') }}
                </div>

              </div>
            </div>
            <!-- <div class="disbox">
              <div class="flex justify-center text-[20px] font-bold text-right text-[#333]">
                <img
                  src="https://img.alicdn.com/imgextra/i2/1034622205/O1CN01Gebmso1S9wPBLP4Th_!!1034622205.png"
                  class="w-[18PX] h-[18PX] ml-[4px]"
                />
              </div>
              <div class="flex items-center justify-center">
                <div class="text-[#333]">4512已收藏</div>
              </div>
            </div> -->
          </div>
          <div class="flex justify-center w-100%" v-if="product.couponAmount"> 
            <div class="flex items-center justify-between coupon">
              <div class="flex items-center w-[50%] coupon-box">
                <p class=" w-[30%] flex justify-center items-center text-[#FF0C06] font-bold coupon-p"
                >
                {{ areaInfo.currencySymbol }}{{ product.couponAmount || 0 }}</p
                >
                <p class="font-bold coupon-p2">{{getLanguage(props.product.language).noThresholdCoupon}}</p>
              </div>
              <div class="flex w-[15%] justify-center items-center coupon-box1">
                <p class="font-bold pr-4px text-[#fff] coupon-box1-p" @click="handleBtnClick({ type:'pickupCoupon' })"  v-if="!isPickup">
                  {{getLanguage(props.product.language).claimNow}}
                </p>
                <p class="font-bold pr-4px text-[#fff] coupon-box1-p" v-else>
                  {{getLanguage(props.product.language).received}}
                </p>
              </div>
            </div>
          </div>

          <!-- <div class="coupon bg mt-[15PX] flex items-center justify-between px-[18px]"
               v-if="product.couponAmount"
               style="background-image: url(https://img.alicdn.com/imgextra/i3/801089336/O1CN018OYOCV2IpwkNUBJ3S_!!801089336.png);background-position: top left;">
            <div>
              无门槛优惠券·预计省下 <span class="text-[#FF0C06]">{{
                areaInfo.currencySymbol
              }}{{ product.couponAmount }}</span>
            </div>

            <div class="px-[12PX] py-[6PX] rounded-[60PX] text-[#FDB03A]"
                 style="border: solid 1px #FDB03A" @click="handleBtnClick({ type:'pickupCoupon' })">
              {{ isPickup ? '已领取' : '立即领取' }}
            </div>
          </div> -->
            

          <div class="flex  mt-[30PX]  w-100% justify-between items-center px-[18px] flex-wrap">
            <div class="flex top-title title w-100%">
              <p class="ml-2 title-bg-btn">{{getLanguage(props.product.language).limitTime}}</p>
              <p class="w-[80%] titleExternal-bg-btn " > {{ product.titleExternal }}{{ product.titleExternal }}{{ product.titleExternal }}{{ product.titleExternal }}</p>
            </div>
            <div class="subTitle text-[#999999] mt-[15PX] px-[18px]">
              {{ product.subtitle }}
            </div>
          
          </div>

          <!-- <div class="subTitle text-[#999999] mt-[15PX] px-[18px]">
            {{ product.subtitle }}
          </div> -->

          <div class="gap w-[100%] h-[1PX] bg-[#F5F5F5] my-[15PX]"></div>

          <div class="mt-[15PX] px-[18px] flex flex-wrap" v-if="product.tagValue">
            <div class="flex mr-[10PX] items-center"
                 v-for="(item,index) in product.tagValue?.split(',')"
                 :key="index"

            >
              <div class="icons bg"

                   style="background-image: url(https://img.alicdn.com/imgextra/i2/801089336/O1CN017XkvI42IpwkOf9NSw_!!801089336.png)">

              </div>

              <div class="ml-[5PX]">
                {{ item }}
              </div>
            </div>
          </div>

          <div class="gap w-[100%] h-[10PX] bg-[#F5F5F5] my-[15PX]" v-if="props.product.thaliFlag == 1">

          </div>

          <!-- 促销 -->
          <div class="detailPart">
            <div v-if="props.product.thaliFlag == 1"
              class="top-title text-[18px] text-[] bg-[] w-[100%] flex px-[18px] py-[18px] relative pl-[30PX] relative">
              <p class="text-[#999] flex">
                {{getLanguage(props.product.language).promotion}}
                <span class="btn-promotion"> {{getLanguage(props.product.language).promotion}}</span>

              </p>
              <div class="ml-[6PX]">
                <p v-for="(itm, idx) in packageList" :key="idx">
                  {{itm?.name}}-{{getLanguage(props.product.language).onlyNeeded}} - {{ areaInfo.currencySymbol }} {{itm.discountedPrice}} <br/>
                  <!-- 每天前50名下單，可獲得一個【蘋果手機】適配充電器，趕緊搶購吧~<br/> -->
                </p>
              </div>

            </div>

            <!-- <div class="py-[15PX]" v-html="product.detail">


            </div> -->

          </div>

          <div class="gap w-[100%] h-[40PX] bg-[#F5F5F5] my-[15PX]">
            <div class="w-[100%] h-[100%] flex items-center justify-center">
              <img
                src="https://img.alicdn.com/imgextra/i3/1034622205/O1CN01qrjk5p1S9wO4DoJRe_!!1034622205.png"
                class="w-[18PX] h-[18PX] ml-[4px]"
              />
              <p class="ml-2 text-[#999]">{{getLanguage(props.product.language).forDetails}}</p>
            </div>
          </div>
          <div class="gap w-[100%] h-[40PX] bg-[#fff] my-[15PX]">
            <div class="pro-box w-[100%] h-[100%] flex items-center justify-around">
              <p class="pro-title">{{getLanguage(props.product.language).productIntroduction}}</p>
              <p class="pro-title" @click="scrollTo('section2')">{{getLanguage(props.product.language).latestReview}}</p>
            </div>
          </div>
          <div class="pro-img">
            <div class="relative htmlDetails img-box px-[18px]">
              <!-- <img src="https://img.alicdn.com/imgextra/i2/1034622205/O1CN01lQ7T7U1S9wNfq8m4y_!!1034622205.png"
               alt=""  class="w-[100%] h-[100%] ml-[4px]" /> -->
              <div v-html="product.detail"></div>
            </div>
          </div>

          <!-- <div class="evaluation px-[18px]">
            <div class="overflow-y-scroll evaluation-box h-600PX">
              <div class="mt-[15PX] flex items-center justify-between evaluation-title">
                <p>評價({{ 1 }})</p>
                <p class="flex items-center"><el-rate disabled v-model="value1" size="large"/>(4.8)</p>
              </div>
              <div class="evaluation-item " v-for="(index) in 10" :key="index">
                  <div class="flex justify-between">
                    <div>
                      <p class="text-[18PX] text-[red]">王*五</p>
                      <p class="flex items-center">
                        满意度：
                        <el-rate v-model="value1" size="large"/></p>
                      <p class="w-80% content mt-2">评论评论评论评论评论评论评论评论评论评论</p>
                    </div>
                    <div class="mt-10PX">
                      <p class="text-[#999]">2024-04-08</p>
                    </div>
                  </div>
              </div>
            </div>
          </div> -->
          <div class="px-[16PX] section2">
            <Evaluation  :comment-list="commentList" :comment-avg-score="commentAvgScore" :product="product"/>
          </div>
          <div class="gap w-[100%] h-[40PX] bg-[#F5F5F5] my-[15PX]">
            <div class="w-[100%] h-[100%] flex items-center justify-center">
              <img
                src="https://img.alicdn.com/imgextra/i2/1034622205/O1CN01Gebmso1S9wPBLP4Th_!!1034622205.png"
                class="w-[18PX] h-[18PX] ml-[4px]"
              />
              <p class="ml-2 text-[#999]">{{getLanguage(props.product.language).recommended}}</p>
            </div>
          </div>
          <div class="detailPart">
            <div class="mt-[15PX]">
              <Recommend :recommend-list="recommendList"
                        v-if="recommendList && recommendList.length>0"/>
            </div>
            <!-- <div v-if="recommendList.length > 0"
              class="top-title text-[18px] text-[] bg-[] w-[100%] flex items-center px-[18px] items-center py-[18px] relative pl-[30PX] relative">
              <div class="py-[18px] h-[100%] absolute top-[0px] left-[18px]">
                <div class="w-[4PX] h-[100%] bg-[#FD4442] mr-[5px] ">

                </div>
              </div>
              {{getLanguage(props.product.language).hotSellingRecommendation}}
            </div> -->

            <!-- <div class="flex flex-wrap mt-[15PX] px-[18px]" >
              <div class="flex recommended w-[100%] overflow-y-scroll px-[18px]">
                <div class="recommended-item" v-for="(item,index) in recommendList" :key="index" @click="toDetail(item.id)">
                  <div class="w-150PX h-150PX bg-[#F5F5F5] rounded-[8PX] mr-[18PX] transition">
                    <img class="w-[100%] h-[100%] rounded-[8PX]" :src="item.cover" alt=""/>
                  </div>
                  <div class="mt-[12PX] ml-2">
                    <p class="recommended-title text-[14PX]">{{item.title}}</p>
                    <div class="flex items-center">
                      <p class="text-[#FF0C06] text-[14PX] font-bold">{{ areaInfo.currencySymbol }}{{item.discountedPrice}}</p>
                      <p class="text-[#c7c7c7] text-[12PX] ml-[10PX]">{{ areaInfo.currencySymbol }}{{item.originalPrice}}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div> -->
            <div class="gap w-[100%] h-[1PX] bg-[#F5F5F5] my-[15PX]"></div>
            <div v-if="policyList.length > 0"
              class="top-title text-[9PX] text-[] bg-[] w-[100%] flex items-center px-[18px] items-center py-[18px] relative pl-[30PX] relative">
              <div class="py-[18px] h-[100%] absolute top-[0px] left-[18px]">
                <div class="w-[4PX] h-[100%] bg-[#FD4442] mr-[5px] ">

                </div>
              </div>
              {{getLanguage(props.product.language).otherExplanations}}
            </div>
            <div>
              <Policy :policy-list="policyList"/>
            </div>

            <div class="gap w-[100%] h-[40PX] bg-[#F5F5F5] mt-[15PX]"> </div>
            <div class="bottom-btn h-[40PX] w-[100%]  flex items-center">
              <!-- <div class="flex justify-center items-center w-[50%] h-[100%]">
                订单查询
              </div> -->
              <div class="fixed left-[50%] translate-x-[-50%] bottom-0  z-10  w-[100%] max-w-[640PX]  h-[45PX] flex-center bg-[#FF0C06] text-[#FFF]"
                  @click="goToBuy"> {{getLanguage(props.product.language).buyNow}}
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <PlaceAnOrder ref="placeAnOrderRef" 
        :isPlaceAnOrder="isPlaceAnOrder && !showSuccess && !showOrder"
        @update:isPlaceAnOrder="updatePlaceAnOrder"
        :product="product"
        :sku-info="skuInfo"
        @execute="handleBtnClick"
        :original-sku="originalSku"
        :areaInfo="areaInfo"
        :provinceList="provinceList"
        :logisticsList="logisticsList"
        :hasProvince="hasProvince"
        :policy-list="policyList"
        :storeList="storeList"
        :globalConfig="globalConfig"
        :package-list="packageList"
        :remote-list="remoteList"
        :is-pickup="isPickup"
        :instruction="instruction"
        :orderInfo="orderInfo"
    />
    <SuccessPage v-if="showSuccess && !showOrder" @update:showSuccess="updateShowSuccess" :orderInfo="orderInfo" :product="product"/>
    <OrderPage v-if="showOrder" @update:showOrder="updateShowOrder" :orderInfo="orderInfo" :product="product"/>
  </div>

</template>
<script lang="ts" setup>
import { CaretRight } from '@element-plus/icons-vue'
import {useMessage} from "@/hooks/web/useMessage";
import { getLanguage } from "@/utils/langue";
import Recommend from "@/views/Product/template/components/Recommend.vue";
import Evaluation from "../components/evaluation.vue";
import PlaceAnOrder from "./placeAnOrder.vue";
import OrderPage from "@/views/Product/template/components/order.vue";
import { computeSkuData } from "@/utils/index";
import SwiperBuyInfo from "../components/swiperBuyInfo.vue";

import SuccessPage from "../components/success.vue";
import Policy from "../components/policy.vue";

const message = useMessage();
// const policyLists= ref([])
const props = defineProps({
  rollList:{
    type: Object,
    required: false,
    default: () => {}
  },
  showOrder:{
    type: Boolean,
    required: false,
    default: () =>false
  },
  instruction:{
    type: Object,
    required: false,
    default: () => {
    }
  },
  remoteList: {
    type: Array,
    required: false,
    default: () => []
  },
  custDown:{
    type:Object,
    defaulst:() => {}
  },
  hasProvince:{
    type: Boolean,
    default:true,
  },
  policyList: {
    type: Array,
    required: false,
    default: () => []
  },
  commentAvgScore: {
    type: Number,
    required: false,
    default: 0
  },
  recommendList: {
    type: Array,
    required: false,
    default: () => []
  },
  commentList: {
    type: Array,
    required: false,
    default: () => []
  },
  packageList: {
    type: Array,
    required: false,
    default: () => []
  },
  product: {
    type: Object,
    required: false,
    default: () => {
    }
  },
  areaInfo: {
    type: Object,
    required: false,
    default: () => {
    }
  },
  skuInfo: {
    type: Array,
    required: false,
    default: () => []
  },
  //原商品列表sku
  originalSku: {
    type: Array,
    required: false,
    default: () => []
  },
  provinceList: {
    type: Array,
    required: false,
    default: () => []
  },
  logisticsList: {
    type: Array,
    required: false,
    default: () => []
  },
  storeList: {
    type: Array,
    required: false,
    default: () => []
  },
  globalConfig:{
    type: Object,
    required: false,
    default: () => {}
  },
  showSuccess:{
    type: Boolean,
    default: false
  },
  orderInfo:{
    type: Object,
    default: () => {}
  }
});
const formRef = ref(null)
const placeAnOrderRef = ref(null)
const isPlaceAnOrder = ref(false)
const activeNames = ref(null)
const emit = defineEmits(['confirm', 'execute']);

const isPickup = ref(false)

const config = ref([
  {
    name: "免运费",
  },
  {
    name: "货到付款",
  },
  {
    name: "15天鉴赏期",
  },
  {
    name: "正品保证",
  }
])


const skuList = ref([])

const initConfig = [
  {
    name: "姓名",
    code: "customerName",
    xs: 24,
    xl: 24,
    required: true
  },
  {
    name: "手机",
    code: "customerPhone",
    xs: 24,
    xl: 24,
    required: true
  },
  {
    name: "选择省",
    code: "areaName",
    type: "select",
    label: "name",
    value: "name",
    xs: 24,
    xl: 8,
    required: true
  },
  {
    name: "选择市区",
    code: "cityName",
    type: "select",
    label: "name",
    value: "name",
    xs: 24,
    xl: 8,
    required: true
  },
  {
    name: "选择地区",
    code: "regionName",
    type: "select",
    label: "name",
    value: "id",
    xs: 24,
    xl: 8,
    required: true
  },
  {
    name: "选择门店",
    code: "addressId",
    type: "select",
    label: "name",
    value: "id",
    xs: 24,
    xl: 24,
    required: false,
    directly: true,
  },
  {
    name: "详细地址",
    code: "detailAddress",
    xs: 24,
    xl: 24,
    required: true
  },
  {
    name: "留言",
    code: "message",
    type: "textarea",
    xs: 24,
    xl: 24,
    required: false
  }
]

const inputConfig = ref([...initConfig]);

const computePrice = computed(() => {
  //获取sku列表
  //查看是否全部选中
  let isAllSelected = isAllPropertySelected().isAllSelected

  if (isAllSelected) {

    let selectedItem = isAllPropertySelected().selectedItem

    let discountPrice = (selectedItem.discountedPrice || 0) * form.value.number;
    if (isPickup.value) {
      discountPrice -= (props.product.couponAmount || 0)
    }
    return {
      price: ((selectedItem.price || 0) * form.value.number).toFixed(2),
      discountPrice: discountPrice.toFixed(2),
      lessPrice: (selectedItem.originalPrice || 0) * form.value.number - (selectedItem.discountedPrice || 0) * form.value.number
    }

  } else {
    //原价为商品价格

    let discountPrice = (props.product.discountedPrice || 0) * form.value.number;
    if (isPickup.value) {
      discountPrice -= (props.product.couponAmount || 0)
    }

    return {
      price: ((props.product.originalPrice || 0) * form.value.number).toFixed(2),
      discountPrice: discountPrice.toFixed(2),
      lessPrice: (props.product.originalPrice || 0) * form.value.number - (props.product.discountedPrice || 0) * form.value.number
    }
  }
})
const toDetail = (id) => {
  let tenantIdString = location.href?.split('?')[1].split('&')[1]
  console.log(tenantIdString.indexOf('tenantId'),);
  if(tenantIdString.indexOf('tenantId') != -1){
    let tenantId = tenantIdString.split('=')[1]
    //  获取当前域名
    let loc = location.host.split(':')[0]
    console.log(loc,"====");

    window.open(
      'http://'+ loc +'/#/product?id=' + id + '&tenantId=' + tenantId,
      '_blank'
    )
  }
}
const updateShowOrder = (val) => {
  //关闭成功页面
  emit('execute', {
    type: 'closeOrder',
  })
}
const scrollTo = (className) => {
  const element = document.querySelector(`.${className}`)
  if (element) {
    // 平滑滚动到指定元素
    element.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    })

    // 如果需要偏移量（如固定头部）
    // window.scrollTo({
    //   top: element.offsetTop - 80,
    //   behavior: 'smooth'
    // })
  }
}
const updatePlaceAnOrder = (val) => {
  isPlaceAnOrder.value = val;
}
const handleChange = (val) => {
  console.log(val)
}
const goToBuy = () => {
  isPlaceAnOrder.value = true;
  // placeAnOrderRef.value.show()
  // 关闭当前页面样式
}
/**
 * 计算rules
 * */
const rules = computed(() => {

  let obj = {}
  inputConfig.value.forEach(item => {
    if (item.required) {
      obj[item.code] = [{
        required: true,
        message: `请${item.type == 'select' ? '选择' : '输入'}${item.name}`,
        trigger: `${item.type == 'select' ? 'change' : 'blur'}`
      }]
    }

  })

  console.log(obj, "===")
  return obj
})

let initForm = {
  number: 1,
  activeLogistics: 0
}

const form = ref({
  ...initForm
})

const updateShowSuccess = (val) => {
  // showSuccess.value = val;
  isPlaceAnOrder.value = false;
  //关闭成功页面
  emit('execute', {
    type: 'closeSuccess',
  })
}

const handleBtnClick = (e) => {
  let type = e.type;
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }
}

const isAllPropertySelected = () => {
  let isAllSelected = true;
  let selectedItem = {}

  if (skuList.value.length > 0) {
    for (let i = 0; i < skuList.value.length; i++) {
      let item = skuList.value[i]
      if (!item.selected) {
        isAllSelected = false;
        break;
      }
    }

    if (isAllSelected) {
      //获取选中的sku
      let str = skuList.value.map(item => {
        //获取选中的list
        let list = item.list;
        let it = list[item.selected - 1]
        return it.name
      }).join('§');

      selectedItem = props.originalSku.find(at => {
        return at.propertyValue == str
      })

    }

  }


  return {
    selectedItem,
    isAllSelected
  }
}

const fn = {
  confirm(data){
    emit('execute', data)
  },
  store(data){
    emit('execute', data)
  },
  pickupCoupon() {
    if (!isPickup.value) {
      isPickup.value = true;
      message.success("领取成功")
    }
  },
  async submit() {
    try {
      let res = await formRef.value.validate();

      let item = inputConfig.value.find(item => {
        return item.code == 'regionName'
      })

      //查看有没有v选择sku
      if (isAllPropertySelected().isAllSelected) {

        let addressItem = inputConfig.value.find(at=>{
          return at.code == "addressId"
        })

        console.log(addressItem,"=====")

        let address = null;
        if(addressItem){
          let lis = addressItem.list;

          console.log(lis,"==============")

          if(form.value.addressId){
            address = lis.find(at=>{
              return at.id == form.value.addressId
            })?.name
          }
        }


        emit('execute', {
          type: 'confirm',
          form: form.value,
          address:address,
          skuList: skuList.value,
          priceInfo: computePrice.value,
          isPickup: isPickup.value,
          regionList: item.list,
          regionName1: item.list.find(at => at.id == form.value.regionName)?.name,
          selectedProperty: isAllPropertySelected().selectedItem,
          success() {
            if(props.globalConfig.orderDelectSteat == 1){
              form.value = {
                ...initForm
              }
            }

          }
          //其他 sku等信息
        })
      } else {
        message.error("请选择sku");
      }


    } catch (e) {
      console.log(e)
      for (let i in e) {
        message.error(e[i][0].message);
        return
      }
    }
  },
  logistics({index}) {
    form.value.activeLogistics = index;
  },
  sku({item, it, index, idx}) {
    item.selected = idx + 1;
  }
}
onMounted(() => {
  // policyLists.value = props.policyList.filter(at=>at.title!='')
})
const onChange = code => {
  if (code == 'areaName') {
    form.value.cityName = ''
    form.value.regionName = ''
    //生成
    let item = inputConfig.value.find(at => {
      return at.code == 'cityName'
    })
    //获取市
    let it = props.provinceList.find(at => {
      return at.name == form.value[code];
    })

    item.list = it.list || [];


    item = inputConfig.value.find(at => {
      return at.code == 'regionName'
    })

    item.list = []

    item = inputConfig.value.find(at => {
      return at.code == 'addressId'
    })

    item.list = [];

  } else if (code == 'cityName') {
    form.value.regionName = ''

    let item = inputConfig.value.find(at => {
      return at.code == 'regionName'
    })

    let item1 = inputConfig.value.find(at => {
      return at.code == 'cityName'
    })

    let it = item1.list.find(at => {
      return at.name == form.value.cityName
    })

    item.list = it.list


    item = inputConfig.value.find(at => {
      return at.code == 'addressId'
    })
    item.list = [];
  } else if (code == 'regionName') {


  } else if (code == 'addressId') {
    let it = props.storeList.find(at => {
      return at.id == form.value[code]
    })

    form.value.detailAddress = it.detailedAddress
  }
}


watch(() => props.provinceList, () => {
  let item = inputConfig.value.find(at => {
    return at.code == 'areaName'
  })
  item.list = props.provinceList
}, {
  deep: true,
  immediate: true
})

watch(() => [form.value.activeLogistics, form.value.regionName], () => {
  if (form.value.regionName) {
    if (props.logisticsList[form.value.activeLogistics]?.directlyStatus == 0) {
      //获取store
      emit('execute', {
        type: 'store',
        data: form.value,
        callback(storeList) {
          let item = inputConfig.value.find(at => {
            return at.code == 'addressId'
          })
          item.list = storeList.map(item => {
            return {
              id:item.id,
              name: item.storeName,
              address: item.detailedAddress
            }
          })
        }
      })
    }

  }
}, {
  deep: true,
  immediate: true
})


watch(() => props.skuInfo, () => {
  skuList.value = props.skuInfo;

  console.log(skuList.value, "skuList.valueskuList.valueskuList.value")
}, {
  deep: true,
  immediate: true
})

</script>
<style>
</style>
<style scoped lang="less">
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.evaluation{
  .evaluation-box{
    .evaluation-title{


    }
    .evaluation-item {
      padding-bottom: 20PX;
      border-bottom: 1PX dotted #E0E0E0;
      margin-top: 10PX;
      .content{
        width: 70%;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
      }
    }
  }
}
.pro-img{
  .img-box{
    width: 100%;
    // height: 640PX;
  }
}
.pro-box{
  .pro-title{
    font-weight: 600;
    font-size: 14PX;
    color: #333333;
    line-height: 20px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
}
.coupon {
  // position: relative;
  background: url(https://img.alicdn.com/imgextra/i2/1034622205/O1CN01SM32L41S9wPK2cAc4_!!1034622205.png)
  no-repeat no-repeat;
  background-size: 100% 100%;
  width: 96%;
  line-height: 28PX;
  height: 28PX;
  box-sizing: border-box;
  .coupon-box{
    // top: 0PX;
    // bottom: 0PX;
    // margin:  auto;
    line-height: 28PX;
    // line-height:calc(96% / 25);
  }
  .coupon-box1{
     line-height: 28PX;
    // top: 0PX;
    // bottom: 0PX;
    // margin:  auto;
    // right: 0PX;
    // line-height:calc(96% / 25);
    :deep(.coupon-box1-p){
      font-size: 10PX;
      padding-right: 4PX;
      line-height: 30PX;
      // height: calc(96% / 25);
    }
  }

  .coupon-p{
    font-size: 10PX;
    padding-left: 10PX;
    box-sizing: border-box;
    // height: calc(96% / 25);
    line-height: 28PX;
  }
  .coupon-p2{
    font-size: 10PX;
    padding-left: 20PX;
    box-sizing: border-box;
    height: 28PX;
    // height: calc(96% / 25);
  }
}
.y-btn{
  background: #FFF5EC;
  padding: 2PX;
  border-radius: 2PX;
  // border-radius: 5PX;
  font-size: 8PX;
  // margin: 10PX 5px 0;
  color: #FDB03A;
}
.title{
  font-weight: 600;
  // margin-top: 20PX;
  .titleExternal-bg-btn{
    width: 80%;
    // 多行文本省略
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .title-bg-btn{
    width: 50PX;
    height: 18PX;
    line-height: 18PX;
    text-align: center;
    background: linear-gradient( 90deg, #FF6953 0%, #FF3741 100%);
    border-radius: 3px;
    margin-right: 10PX;
    color: #fff;
    font-weight: 500;
    font-size: 10PX;
    color: #FFFFFF;
    // line-height: 24px;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    border-radius: 3px;
  }
}
.recommended{

  .recommended-item{

    .recommended-title{
      width: 120PX;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
// .policy{
//   p{
//     font-size: 10PX;
//   }
//   img{
//     width: 9PX;
//     height: 9PX;
//     border-radius: 50%;
//   }
//   :deep(.el-collapse-item__header){
//      height: 30PX;
//     line-height: 30PX;
//     font-size: 12PX;
//     border: none !important;
//   }
// }
.bottom-btn{
  border: 2PX solid #FF3741;
  .bottom-btn2{
    background: #FF3741;
    color: #fff;
    img{
      width: 12PX;
      height: 12PX;

    }

  }
}













@import "@/common";

.index {
  .content {
    width: 640PX;
    height: 100%;

    .top-title {
      font-size: 14PX !important;
      .btn-promotion{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 6PX;
        width: 40PX;
        line-height: 40PX;
        height: 18PX;
        background: #FFF5F5;
        border-radius: 3PX;
        border: 1px solid #FF0C06;
        color: #FF0C06;
        font-size: 12PX;
      }

      .bar {
        width: 4PX;
      }
    }

    .subTitle {
      font-size: 14PX !important;
    }

    .swiper {
      width: 100%;
      height: 640PX;

      .swiper-item {
        width: 100%;
        height: 640PX;
      }

      .benefit {
        width: 100%;
        height: 64PX;

        .qianggou-num {
          padding: 5PX 12PX;
        }
      }

      .cycle {
        width: 27PX;
        height: 27PX;
        border-radius: 5PX;
        background: #FD4442;
      }
    }


    .price {
      font-size: 28PX;
      margin-bottom: -5PX;
    }

    // .coupon {
    //   width: 100%;
    //   height: 45PX;
    //   padding-left: 60PX;
    // }


    .icons {
      width: 14PX;
      height: 14PX;
    }
  }

  .ft12 {
    font-size: 12PX !important;
  }
}

@media screen and (max-width: 640PX) {
  .index {
    .content {
      width: 100%;

      .swiper {
        width: 100vw;
        height: 100vw;

        .swiper-item {
          width: 100vw;
          height: 100vw;
        }
      }
    }

    .ft12 {
      .font(18);
    }

  }
}

:deep(.el-carousel) {
  width: 100%;
  height: 100%;

  .el-carousel__container {
    width: 100%;
    height: 100%;
  }
}

:deep(.el-input-number) {
  width: 135PX;
  height: 30PX;

  .el-input-number__decrease, .el-input-number__increase {
    width: 28PX;
    height: 28PX;
    border-radius: 0PX;
  }

  .el-input__inner, .el-input__wrapper {
    height: 30PX !important;
  }

  .el-icon {
    font-size: 14PX;
  }

}

:deep(.el-input) {
  height: 30PX;

  .el-input__inner, .el-input__wrapper {
    height: 30PX !important;
    border-radius: 5PX;
  }


}

:deep(.el-textarea ) {
  height: 60PX !important;

  .el-textarea__inner {
    height: 60PX !important;
    font-size: 10PX;
  }

}


:deep(.el-select) {
  height: 30PX !important;

  .el-select__selected-item, .el-input__inner, .el-select__wrapper {
    height: 30PX !important;


  }

  .el-select__placeholder {
    display: flex !important;
    align-content: center;
    align-items: center;
  }

}

:deep(.el-form-item) {
  margin-bottom: 0PX;
  margin-top: 15PX;
}
</style>
